<template>
<div>
    <iframe src="https://news.china.com/etc/buddhism-top.html" width="100%" height="31" frameborder="0" scrolling="no"></iframe>
	<div class="maxWidth">
		<div class="topad-wrapper">
			<a href="https://j.youzan.com/ec1-J9" target="_blank" onclick="_hmt.push(['_trackPageview', '/ad/top/click']);">
				<img src="https://fo.china.com/images/ad-top.png" title="" alt="" class="imgTop">
			</a>
		</div>
	</div>

	<!-- 导航 -->
	<div class="foxHead">
		<div class="foxLogo">
			<a href="/" target="_blank" title="中华网佛教">
				<img src="https://fo.china.com/images/logo-fox.png" alt="中华网佛教">
			</a>
		</div>
		<div class="foxNav">
			<ul class="nav">
				<li><a href="/" target="_self" class="active">首页</a></li>
				<li><a href="/fonews/init" target="_blank">全国佛讯</a></li>
				<li><a href="/foculture/init" target="_blank">佛教文化</a></li>
				<li><a href="/fostory/init" target="_blank">佛教故事</a></li>
				<li><a href="/fomusic/init" target="_blank">诵经祈福</a></li>
				<li><a href="/monastery/init" target="_blank">僧伽蓝摩</a></li>
			</ul>
		</div>
	</div>

<div class="page" style="padding-bottom:120px;">
    
    <div class="personage clearfix">
        
        <div class="personage-content clearfix">
            <div class="personage-song-list fl clearfix">

                <div class="personage-song-list-title clearfix">
                    <div class="personage-song-list-one" style="padding-left:36px">
                        歌曲
                    </div>
                    <div class="personage-song-list-two">
                        专辑
                    </div>
                    <div class="personage-song-list-three">
                        时长
                    </div>
                </div>

                <div class="personage-song-list-cont clearfix">
                    <div class="personage-song-list-l" v-for="(item, index) of list" :key="index">
                        <div class="personage-song-list-one">
                            <span class="mr16">{{index + 1}}</span>{{ item.name}}
                        </div>
                        <div class="personage-song-list-two">
                            {{ item.albumname }}
                        </div>
                        <div class="personage-song-list-three">
                            {{ item.playtime }}
                        </div>
                    </div>
                </div>
                
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" style="margin:20px auto 0;" :page-size="pagesize" v-if="total > 10"></el-pagination>
            </div>

            <div class="you-like clearfix">
                <div class="play-r" @click="routerLink(`/main/index?tsid=${tsid}`)">
                    <img :src="info.tspicture" alt="">
                    <p>{{ info.author }}</p>
                </div>

                <div class="my-font" v-html="info.content"></div>
            </div>
        </div>
    </div>

    <div class="playTool">
        <div class="playToolCont clearfix">
            <div class="palyCont fl" style="margin-right:20px; width:186px">
                <i class="iconfont icon-shangxiashou-" @click="prev()"></i>
                <i class="iconfont icon-bofang" @click="play()" v-show="!openState"></i>
                <i class="iconfont icon-zanting-1" @click="play()" v-show="!!openState"></i>
                <i class="iconfont icon-shangxiashou-1" @click="next()"></i>
            </div>
            <div class="playprocess fl">
                <div class="playprocess-top clearfix">
                    <span class="fl">{{info.name}} - {{info.tsname}}</span>
                    <span class="fr">{{ residueTime }}</span>
                </div>
                <div class="playProcess-bottom">
                    <el-slider v-model="residue" @change="changeProccess" :show-tooltip="false"></el-slider>
                </div>
            </div>

            <div class="playOrder fl">
                <i class="iconfont icon-xunhuananniu-" v-show="!playState" @click="switchPlayState"></i>
                <i class="iconfont icon-xunhuananniu-1" v-show="playState" @click="switchPlayState"></i>
            </div>

            <div class="playVoice fl clearfix">
                <i class="iconfont icon-yinliang- fl"></i>
                <div class="playVoice-r fl">
                    
                    <div class="playProcess-bottom ">
                        <el-slider v-model="volume" @change="changeVolume" :show-tooltip="false"></el-slider>
                        <!-- <div class="process-btn" style="width:50%"></div>
                        <div class="process-radio" style="left:50%"></div> -->
                    </div>
                </div>
            </div>  
        </div>
    </div>

    <!-- http://piocwwq1n.bkt.clouddn.com/music1.mp3 -->
    <VueAudio 
        :url="info.musiclink"
        ref="vueAudio"
        @setMaxTime="getMaxTime"
        @setResidue="getResidue"
         
    ></VueAudio>
</div>
</div>
</template>
<script>
import {getResponse, getResponses} from "../api"
import VueAudio from "../components/vueAudio.vue"
import { setTimeout } from 'timers';


export default {
    data() {
        return {
            tsid:'',
            albumid:'',
            list:[],
            total:[],
            pagenum:1,
            pagesize:10,
            info:{},
            openState:false,
            maxTime:'',
            residue:0,
            residueTime:'',
            src:'',
            index:0,
            left:0,
            volume:100,
            playState: false
        }
    },


    components:{
        VueAudio
    },
    methods:{
        routerLink(url){
            this.$router.push(url)
        },

        play() {
            this.openState = !this.openState
            this.$refs['vueAudio'].startPlayOrPause()
        },

        switchPlayState() {
            this.playState = !this.playState
        },

        //获取当前音乐时常
        getMaxTime(time) {
            this.maxTime = time
            
        },
        
        randowFn() {
            return parseInt(Math.random() * 10)
        },

        //获取当前播放进度
        getResidue(residueTime, residue) {
            if(residue == 100) {
                this.next()
            }

            if( residueTime.indexOf('00:00') === -1) {
                this.residue = residue
                this.residueTime = residueTime
            }
            
        },
        // 法师音乐列表
        async getMusic() {	
            const data = await getResponses(`/fochina/query/music/json`,`albumid=${this.albumid}&tsid=${this.tsid}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`)
            
            if(data.code === '0000') {
                this.list = data.data
                if( this.list.length > 0) {
                    this.info = this.list[0]
                    this.residueTime = this.info.playtime

                    this.tsid = this.info.tsid
                }
                this.total = +data.total

            } else {
                console.log(data.error)
            }
        },

        // 进度拖动 歌曲
        changeProccess(index) {
            this.$refs['vueAudio'].changeCurrentTime(index)
        },

        // 音频拖动
        changeVolume(index) {
            this.volume = index
            this.$refs['vueAudio'].changeVolume(index)
        },

        prev() {
             if(this.playState) {
                this.index = this.randowFn()
                this.playStateFn()
                return false;
            }

            this.index --

            if( this.index < 0) {
                this.index = this.list.length - 1
            }

            this.playStateFn()
        },

        next(){

            if(this.playState) {
                this.index = this.randowFn()
                this.playStateFn()
                 return false;
            }

            this.index ++

            if( this.index > this.list.length - 1) {
                this.index = 0
            }

            this.playStateFn()
            // 
           
        },

        playStateFn() {
            this.info = this.list[this.index]
            this.openState = true
            setTimeout(()=>{
                this.$refs['vueAudio'].startPlayOrPause()
            },500)
        },

        handleCurrentChange(val) {
            this.pagenum = val
            this.getMusic()
        },
    },

    mounted(){
        !!this.$route.query.tsid && (this.tsid = this.$route.query.tsid)
        !!this.$route.query.albumid && ( this.albumid = this.$route.query.albumid )
        this.getMusic()
        
    }
}
</script>

<style>
.el-pagination {
    text-align: center
}
html, body, body>div:first-child, .page {
    min-height: 100%;
}

.playVoice {
    width:128px;
    padding-top:24px;
}



.playVoice-r {
    width:100px;
}

.playProcess-bottom {
    margin-top:14px;
    background: rgba(255,255,255,0.30);
    border-radius: 100px;
    width:100%;
    height: 4px;
    position: relative;
    
}

.playOrder {
    line-height: 80px;
    margin-right:20px;
}

.playOrder i,.playVoice i{
    font-size:28px;
    color:#fff
}

.palyCont {
   width:126px; 
   line-height: 80px;
   margin-right:80px;
}

.palyCont i {
    float: left;
}

.process-btn {
    background: #fff;
    border-radius: 100px;
    height: 4px;
}

.process-radio {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:10px;
    height: 10px;
    border-radius: 100%;
    background: #fff;
}

.palyCont .icon-shangxiashou-, .playTool .icon-shangxiashou-1 {
    font-size:40px;
    color:#fff
}

.playprocess {
    width:520px;
    margin-right:97px;
}

.playprocess-top {
    padding-top: 18px;
    width:520px;
}

.playprocess-top span {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    
}

.palyCont .icon-bofang, .palyCont .icon-zanting-1 {
    font-size:40px;
    color:#fff;
    margin:0 24px;
}

.playToolCont {
    width:1000px;
    height: 80px;
    margin:0 auto;
}

.playTool {
    width:100%;
    height: 80px;
    position:fixed;
    left:0;
    bottom:0;
    background: rgba(0,0,0,0.60);
}
.play-r {
    width:270px;
    text-align: center;
    float: right;
    cursor: pointer;
}

.play-r img {
    width:72px;
    height: 72px;
    border-radius:50%;
    margin:0 auto 10px;
}

.my-font {
    float: right;
    margin-top:21px;
    width:270px;
    height: 360px;
    font-size: 14px;
    color: #333333;
    line-height: 24px;
    overflow: auto;
}


.my-font::-webkit-scrollbar{
	width: 10px;
	background-color: #fff;
}

.my-font::-webkit-scrollbar-thumb
{
    background: #E9EAEC;
    border-radius: 100px;
}


.play-r p {
    font-size: 18px;
    color: #333;
}

.personage-content {
    padding-top: 17px;
}

.personage,.personage-content{
    width:100%;
}



.personage-header-cont h3 {
    font-size: 28px;
    color: #333333;
    height: 40px;
    margin-bottom: 14px;
}

.personage-header-cont p {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
    line-height: 18px;
}

.personage-size {
    margin-top:16px;
}

.personage-size span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    min-width: 116px;
}

.personage-size span em {
    font-style: normal;
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #333333;
    margin-left:14px;
    margin-top:-2px;
}

.personage-btn a {
    display: inline-block;
    width:156px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    margin-right:16px;
    border: 1px solid #823117;
    margin-top:18px;
}

.personage-btn span {
    font-size: 14px;
}

.personage-song-list,.personage-song-list-cont {
    width:680px;
}

.personage-song-header{
    height: 32px;
    line-height: 32px;
    padding-top:18px;
    border-bottom: 4px solid #C6A4A4;
    margin-bottom:20px;
}

.personage-song-header span{
    display: inline-block;
    font-size: 16px;
    color: #333;
    min-width: 90px;
    height: 32px;
    line-height: 32px;
    margin-bottom: -4px;
    margin-right:24px;
    padding-left:12px;
    border-bottom: 4px solid #C6A4A4;
}

.personage-song-header span.active {
    border-bottom: 4px solid #823117;
    color: #823117;
}

.personage-song-list-title{
    background-color: #F6F6F6;
    text-align: left;
    font-size: 12px;
    color: #999;
    line-height: 40px;
}

.personage-song-list-one {
    width:338px;
    padding-left:6px;
    height:59px;
    float: left;
}

.personage-song-list-two {
    width:239px;
    height: 59px;
    float: left;
}

.personage-song-list-three {
    width:67px;
    height: 59px;
    float: left;
}

.personage-song-list-l {
    width:680px;
    height: 58px;
    line-height: 58px;
    border-bottom: 1px solid #E9EAEC;
    font-size: 14px;
    color: #333333;
}


.personage-song-list-l .personage-song-list-one span {
    color:#999;
    font-size: 14px;
}

.personage-song-list-l .personage-song-list-three {
    font-size: 12px;
    color: #999;
}

.you-like {
    width:300px;
    float:right;
    padding-left:20px;
}

.you-like-title{
    height: 32px;
    line-height: 32px;
    padding-top:18px;
    border-bottom: 4px solid #fff;
    margin-bottom:20px;
    font-size: 16px;
    color: #000000;
}

.you-like-list-cont {
    width:120px;
    margin:0 0 30px 30px;
    float: left;
}

.you-like-list-cont img {
    width:120px;
    height: 120px;
    border-radius: 100%;
}

.you-like-list-cont p {
    font-size: 14px;
    color: #333333;
    text-align: center;
    height: 20px;
    width:100%;
    margin-top:9px;
}

.topad-wrapper {
    padding-top: 10px;
    height: 90px;
}

.imgTop {
    width: 1000px;
    height: 90px;
}

.maxWidth {
    width: 1000px;
    margin: auto;
    text-align: left;
    clear: both;
}

.foxHead {
    width: 1000px;
    height: 70px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.foxLogo {
    position: absolute;
    left: 0px;
    top: 20px;
    width: 128px;
    height: 50px;
    text-align: left;
}

.foxLogo img {
    border: 0;
    width: 126px;
    height: 50px;
}


.foxNav {
    position: absolute;
    left: 130px;
    top: 30px;
    font-size: 14px;
    height: 50px;
    text-align: center;
    width: 882px;
    background: #823117;
}

.foxNav .nav {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    height: 50px;
}

.foxNav .nav li {
    float: left;
}

.foxNav .nav li a.active {
    background-color: #9F3D1E;
}

.foxNav .nav li a {
    display: block;
	height: 50px;
	font-size:14px;
    text-align: center;
    line-height: 40px;
    width: 80px;
    text-decoration: none;
    color: #fff;
    margin-right: 2px;
    padding: 0 5px;
}


.pageFooter a {
    color: #333;
    font-size: 12px;
    text-decoration: none;
}

.pageFooter img {
	vertical-align: middle;
	display: inline;
	margin-right: 5px;
}

.pageFooter i {
    margin: 0 2.5px;
    font-style: normal;
}

.pageFooter {
    margin: 0 auto;
    color: #333;
    font-size: 12px;
    margin-top: 30px !important;
    line-height: 28px !important;
    text-align: center;
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    padding: 20px 0 20px !important;
}

.playProcess-bottom .el-slider__runway {
    background: rgba(255,255,255,0.30);
    border-radius: 100px;
    width: 100%;
    height: 4px;
    position: relative;
    margin: 0;
}

.playProcess-bottom .el-slider__button-wrapper {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 1001;
    top:50%;
    transform: translateY(-50%);
    left:0;
    margin:0;
}
.playProcess-bottom .el-slider__bar {
    height:4px;
    background-color: #fff;
    border-top-left-radius:2px;
    border-bottom-left-radius: 2px;
    position: absolute;
}

.playProcess-bottom .el-slider__button {
    /* position: absolute;
    top: 50%;*/
    transform: translateY(-50%); 
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #fff;
    border:none;
    background-color: #fff;
    border-radius: 50%;
    transition: .2s;
}
.playProcess-bottom .process-radio {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #fff;
}
</style>